<template>
	<div class="writer">
		<torder ref='change'></torder>
		<div class="htotal">
			<div class="horder">
				<div class="hwrite">
					<textarea class="htexta" placeholder="请填写收货地址"></textarea>
					<span class="position num1"><a href="javascript" class="iconfont icon-lunboyoufangun "></a></span>
					
				</div>
				<div class="horder_infro container">
					
					<img src="../../../assets/wine/baijiu.png" class="order_img"/>
					<img src="../../../assets/wine/baijiu.png" class="order_img"/>
					
					<span class="horder_num position">共3件<a href="javascript:void(0)" class="iconfont icon-lunboyoufangun"></a></span>
					
				</div>
				<div class="hpay horder_common horder_border">
					<span class="hflighter">支付方式</span>
					<span class="horder_num position">在线支付<a href="javascript:void(0)" class="iconfont icon-lunboyoufangun"></a></span>
				</div>
				<div class="hdistribute horder_common container horder_border">
					<span class="hflighter" style="padding-left: 0.6rem;">配送方式</span>
					<span class="horder_num position"><div class="container"><div style="display: inline-block;">普通快递<br />时间不限</div><a href="javascript:void(0)" class="iconfont icon-lunboyoufangun "></a></div></span>
				</div>
				<div class="hdistribute horder_common container">
					<span class="hflighter" style="padding-left: 0.6rem;">发票信息</span>
					<span class="horder_num position"><div class="container"><div style="display: inline-block;">普通发票<br />个人<br />明细</div><a href="javascript:void(0)" class="iconfont icon-lunboyoufangun "></a></div></span>
				</div>
				<div class="note_infro">
					<div class="note">备注</div>
					<div class="note_kuang">45字以内</div>
					
				</div>
				<div class="hdistribute horder_common container">
					<span class="hflighter" style="padding-left: 0.6rem;display: inline-block;">商品总计<br />运费</span>
					<span class="horder_num position"><div class="container"><div style="display: inline-block;">¥195.00<br />+¥5.00</div></div></span>
				</div>
				<div class="submit">
					<div class="submit_right">
						<span>应付金额:<span class="horder_price">¥200.00</span></span>
						<div class="submit_order">
							提交订单
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
	
</template>

<script>
	import torder from './torder.vue'	
	export default{
		name:"writeorder",
		components:{
			torder
		},
		mounted(){
			var _this = this;
			$(function(){
				_this.$refs.change.changeText();
			})
		}
	}
	
	
</script>

<style scoped>
	.writer torder >>> span{
		
	}
	.horder{width: 100%;position: relative;}
	.hwrite{width: 100%;margin: 0 auto;text-align: center;}
	.htexta{width:96%; height: 8rem;background: rgba(255,255,255,1);resize: none;outline: none;}
	.hwrite textarea[placeholder]{line-height: 8rem;font-size: 1.2rem;padding-left: 1rem;right: 1rem;}
	.position{position:absolute;right: 1rem;color: grey;}
	.position a{text-decoration: none;color: grey;}
	.num1{top: 3.4rem;}
	.horder_num{font-size: 1.2rem;text-align: right;}
	.horder_infro{width: 100%;height: 6rem;line-height:6rem;padding-left: 0.6rem;border-top: 0.6rem solid #f4f4f4;border-bottom: 0.6rem solid #f4f4f4;background: rgba(255,255,255,1);}
	.order_img{width: 3.5rem;vertical-align: middle;}
	.hpay{height: 4rem;line-height:4rem;}
	/*公共样式*/
	.horder_common{width: 100%;padding-left: 0.6rem;background: rgba(255,255,255,1);}
	/*下划线*/
	.horder_border{border-bottom: 1px solid rgba(178,178,178,0.5);}
	.hflighter{font-size: 1.3rem; color: #b2b2b2;}
	.hdistribute{height: 4rem;padding: 1rem 0;}
	.container{display: flex;align-items: center;}
	.note_infro{width: 100%;height: 5rem;border-top: 0.6rem solid #f4f4f4;border-bottom: 0.6rem solid #f4f4f4;background: rgba(255,255,255,1);font-size: 1.3rem; color: #b2b2b2;padding: 0.5rem 0 1rem 0.6rem;}
	.note{height: 2rem;}
	.note_kuang{width: 95%; height: 3rem;line-height: 3rem;border: 1px solid rgba(178,178,178,0.5);padding-left: 0.5rem;}
	.submit{width: 100%;height: 4.5rem;line-height: 4.5rem;background: rgba(249,249,249,1);font-size:1.4rem;position: relative;}
	.submit_right{position:absolute;right: 0;}
	.horder_price{color: #b91b34;}
	.submit_order{background: rgba(185,27,52,1);color: white;width: 8rem;text-align: center;display: inline-block;font-weight: 100;}
	.inlineB{display: inline-block;}
	.color{color: red;}
</style>